<template>
  <div class="lab-container">
    <!-- 导航栏（保持原有顶部导航） -->
    <nav class="navbar navbar-expand-lg bg-body-tertiary border-bottom">
      <!-- 原有导航栏代码保持不变 -->
    </nav>

    <!-- 内容区域 -->
    <main class="container my-5">
      <div class="row">
        <!-- 左侧标签页 -->
        <div class="col-md-3">
          <div class="border p-3">
            <h5 class="mb-3">人才培养</h5>
            <div class="nav flex-column nav-pills">
              <button
                v-for="(tab, index) in tabs"
                :key="index"
                class="nav-link text-start"
                :class="{ active: activeTab === index }"
                @click="activeTab = index"
              >
                {{ tab.title }}
              </button>
            </div>
          </div>
        </div>

        <!-- 右侧内容区域 -->
        <div class="col-md-9">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item">
                <router-link to="/homePage">首页</router-link>
              </li>
              <li class="breadcrumb-item">
                <router-link to="/personnelTraining">人才培养</router-link>
              </li>
              <li class="breadcrumb-item active">
                {{ tabs[activeTab].title }}
              </li>
            </ol>
          </nav>

          <div class="content-box border p-4">
            <!-- 动态内容区域 -->
            <template v-if="activeTab === 0">
              <h3 class="mb-4">学位点介绍</h3>
              <!-- 横线 -->
              <div class="custom-divider my-4"></div>
              <p style="text-indent: 2em" v-text="tabs[0].content"></p>
            </template>
            <template v-if="activeTab === 1">
              <h3 class="mb-4">招生概况</h3>
              <!-- 横线 -->
              <div class="custom-divider my-4"></div>
              <p
                style="text-indent: 2em"
                v-text="tabs[1].content"
              ></p> </template
            ><template v-if="activeTab === 2">
              <h3 class="mb-4">杰出人才</h3>
              <!-- 横线 -->
              <div class="custom-divider my-4"></div>
              <div
                v-for="(item, index) in tabs[2].content"
                :key="index"
                class="mb-4"
              >
                <span
                  v-text="item.name"
                  class="fw-bold"
                  style="color: var(--site-color)"
                ></span>
                :
                <span v-text="item.message"></span>
              </div>
            </template>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref } from "vue";
const activeTab = ref(0);
const tabs = ref([
  {
    title: "学位点介绍",
    content:
      "本实验所在学科是在我校老一辈力学专家王龙甫等先生的直接领导下创立并发展壮大的，学校1984年获得流体力学博士点，2003年获得固体力学博士点，2005年获得力学一级学科博士点，1999年建立力学博士后流动站。固体力学1994年为第一批省级重点学科，2003年再次批准为湖北省重点学科，力学一级学科2008年批准为湖北省重点学科，2013年再次被批准为湖北省重点学科，是学校“211”工程重点建设的学科之一。学科特色十分鲜明，主要表现在力学与材料科学、力学与土木结构工程、力学与船舶海洋工程、力学与飞行器结构的交叉融合方面。力学学科已形成以博士生导师和年轻博士为主的4支学术梯队，形成了智能材料力学与工程应用，先进功能材料力学与新能源技术，复合材料结构与工程应用，大型装备及复杂结构计算、优化与检测技术四个具有鲜明特色的学术研究方向。本实验室所在学科从1982年起开始招收研究生。现有力学一级学科博士点，下设固体力学、工程力学、流体力学、一般力学与力学基础等4个二级博士点。并设有力学博士后流动站。",
  },
  {
    title: "招生概况",
    content:
      "招生方向主要包括新材料力学、智能材料结构力学、复合材料力学、计算力学、应用流体力学等。2020-2024年招收了45名博士研究生、209名硕士研究生，毕业26名博士研究生和169名硕士研究生，毕业生就业率100%。培养的优秀博士研究生入选国家高层次人才项目（青年）1人、武汉理工大学青年拔尖高层次人才1人。培养的学生获中国青年志愿服务项目大赛金奖1人，获得湖北省青年志愿服务项目大赛银奖1人，获第七届中国国际“互联网+”大学生创新创业大赛全国总决赛金奖1人，入选中国青年志愿者研究生支教团2人。",
  },
  {
    title: "杰出人才",
    content: [
      {
        name: "李君",
        message:
          "毕业于2020年，获评校级优秀博士学位论文, 现就职于武汉理工大学理学院力学系，聘为特岗教授，入选武汉理工大学青年拔尖人才第二层次，在INT J PLASTICITY、Phys. Rev. Lett.等顶级期刊发表高水平SCI论文20余篇。",
      },
      {
        name: "时强",
        message:
          "毕业于2021年，入选江苏省委人才办、科技厅“科技副总”、南京市企业专家工作室专家、紫金山英才计划溧水区高层次创新创业人才。兼任南京新核复合材料有限公司副总经理、江苏省高性能缠绕复合材料工程技术研究中心负责人。主持制定国家标准1项、修订行业标准1项、制定中国石油和化学工业联合会团体标准1项，获南京市溧水区总工会“技术创新能手”荣誉称号、南京市科协“讲理想 比贡献”活动先进个人。以第1发明人授权发明专利3项，实用新型专利10余项，公开发表学术论文35篇。",
      },
    ],
  },
]);
</script>

<style scoped>
.custom-divider {
  height: 2px;
  background-color: var(--site-color);
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}
.nav-link,
.nav-link:hover {
  color: var(--site-color);
}
li > a {
  color: var(--site-color);
}
.nav-pills .nav-link {
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}

.nav-pills .nav-link.active {
  background-color: var(--site-color);
  color: white !important;
}

.content-box {
  min-height: 600px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style>